<template>
  <div>
    <el-card class="articles-container">
      <!-- 顶部 -->
      <el-row>
        <el-col :span="18">
          <el-form :inline="true">
            <el-form-item label="关键字">
              <el-input
                v-model="pageParams.keyword"
                placeholder="请根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="请选择" class="right">
              <el-select v-model="pageParams.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button @click="clearbtn()">清除</el-button>
              <el-button @click="filter()" type="primary">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="showDialog = true"
            >新增技巧</el-button
          >
        </el-col>
      </el-row>

      <!-- 数据共计 -->
      
      <el-alert
        :title="`数据一共 ${pageParams.counts} 条`"
        style="margin-bottom: 15px"
        type="info"
        :closable="false"
        show-icon
      ></el-alert>
      
      <!-- /顶部 -->

      <!-- 数据表格 -->

      <template>
        <el-table border :data="items">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="title" label="文章标题">
            <template slot-scope="scope">
              {{ scope.row.title }}
              <a
                @click.prevent="openVideo(scope.row.videoURL)"
                v-if="scope.row.videoURL"
                href="#"
                class="el-icon-film"
              ></a>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>

          <el-table-column prop="createTime" label="录入日期">
            <template slot-scope="{ row }">{{
              row.createTime | parseTimeByString
            }}</template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">{{
              scope.row.state === 1 ? "已启用" : "已禁用"
            }}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="280">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="previewbtn(row)">
                预览
              </el-button>
              <el-button type="text" size="small" @click="changeStatebtn(row)"
                >{{ row.state === 1 ? "禁用" : "启用" }}
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="updatebtn(row)"
                :disabled="row.state === 1"
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="remove(row)"
                :disabled="row.state === 1 || row.totals > 0"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- /数据表格 -->

      <!-- 分页码 -->
      <el-pagination
        background
        style="margin-top: 20px; text-align: right"
        @size-change="changeSize"
        @current-change="changePage"
        :current-page.sync="pageParams.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageParams.pagesize"
        layout="prev, pager,next,sizes,jumper"
        :total="pageParams.counts"
      >
      </el-pagination>
      <!-- /分页码 -->
    </el-card>

    <!--  放置弹出组件-->

    <!-- 新增文章组件 -->
    <articles-add :show-dialog.sync="showDialog"></articles-add>

    <!-- 预览文章组件 -->
    <articles-preview
      ref="articlesPreview"
      :data="previewArticle"
    ></articles-preview>
    <!-- 修改文章组件 -->
    <el-dialog title="修改文章" :visible.sync="showlog">
      <el-row :gutter="15">
        <el-form
          ref="editform"
          :model="editform"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="17">
            <el-form-item label="文章标题" prop="title">
              <el-input
                v-model="editform.title"
                placeholder="请输入文章标题"
                :style="{ width: '140%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="文章内容" prop="articleBody">
               <quill-editor
                v-model="editform.articleBody"
                :options="editorOption"
                :style="{ width: '140%', height: '120px' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="17" class="video">
            <el-form-item label="视频地址">
              <el-input
                v-model="editform.videoURL"
                placeholder="请输入视频地址"
                :style="{ width: '140%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 视频 -->
    <div class="video-preview" v-if="showVideo">
      <div class="close" @click="closeVideo">
        <span class="el-icon-close"></span>
      </div>
      <div class="box">
        <video ref="video" :src="videoURL" autoplay></video>
      </div>
    </div>
  </div>
</template>


 
<script>
import {
  list,
  remove,
  detail,
  update,
  changeState,
} from "../../api/hmmm/articles";
import articlesAdd from "../components/articles-add";
import articlesPreview from "../components/articles-preview.vue";
export default {
  components: {
    articlesAdd,
    articlesPreview,
  },
  data() {
    return {
      pageParams: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10,
        counts: 0,
       
      },
      videoURL: null,
      total: 0,
      showVideo:false,
      
      // Editor富文本输入框配置  修改文章
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            [{ list: "ordered" }, { list: "bullet" }], //列表
            ["blockquote", "code-block", "image", "link"],
          ],
        },
        placeholder: "",
      },
      // 弹出组件
      editform: {
        title: "", //标题
        articleBody: "", //文章正文
        videoURL: null, //视频地址
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入文章标题",
            trigger: "blur",
          },
          {
            min: 1,
            max: 100,
            message: "文章标题长度为1-50个字符",
            trigger: "blur",
          },
        ],
        articleBody: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
      },
      items: [], //表格数据
      showDialog: false, //默认不显示
      showlog: false, //修改组件默认不显示
      previewArticle: {}, //预览文章
    };
  },
  created() {
    this.list();
  },
  methods: {
    //获取数据
    async list() {
      const { data } = await list(this.pageParams);
      console.log(data);
      this.items = data.items;
      // console.log(data);
      this.pageParams.counts = data.counts
    },
    //修改分页跳转的切换
    changePage(newpage) {
      this.pageParams.page = newpage;
      this.list();
    },
    // 切换条数
    changeSize(newsize) {
      this.pageParams.pagesize = newsize;
      this.list();
    },
    // 删除整行
    async remove(id) {
      try {
        await this.$confirm("确定删除吗？");
        await remove(id);
        this.$message.success("删除成功");
        this.list(); //重新获取数据
      } catch (error) {
        this.$message("取消删除");
      }
    },

    // 清除按钮筛选条件
    clearbtn() {
      this.pageParams = {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10,
      };
    },
    // 进行筛选
    filter() {
      this.pageParams.page = 1;
      this.list();
    },

    // 禁用按钮切换状态
    async changeStatebtn(article) {
      await changeState({
        id: article.id,
        state: article.state === 1 ? 0 : 1,
      });
      this.$message.success("操作成功");
      article.state = article.state === 1 ? 0 : 1;
    },

    //修改文章
    async updatebtn(id) {
      // Promise函数
      const res = await detail(id); //获取文章详情  并实现数据的回写
      //  console.log(res.data);
      this.editform = res.data;
      // console.log(detail(id));
      this.showlog = true; //显示弹层
    },

    async btnOk() {
      try {
        await this.$refs.editform.validate();
        //只要校验通过的成功才执行await的下方内容
        //editform这个对象有id就是编辑  没有id就是新增
        await update(this.editform); //更新接口
        this.list(); //重新拉取数据
        this.$message.success("操作成功");
        this.showlog = false;
      } catch (error) {
        console.log(error);
      }
    },
    btnCancel() {
      this.showlog = false;
    },
    // 修改文章结束

    // 预览文章
    previewbtn(article) {
      this.previewArticle = article;
      this.$nextTick(() => {
        this.$refs.articlesPreview.logshowPreview();
      });
    },
    // 视频展示
    openVideo(url) {
      this.videoURL = url;
      // this.$nextTick(() => {
      //   this.$refs.video.play();
      // });
      this.showVideo = true
    },
    closeVideo() {
      console.log(1111);
      this.showVideo = false
      this.videoURL = null;
    },
  },
};
</script>



<style lang="less" scoped>
.articles-container {
  padding: 10px;
  .el-icon-film {
    color: blue;
    font-size: 18px;
  }
}
.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
